<!--
 * @Author: your name
 * @Date: 2021-04-17 10:31:39
 * @LastEditTime: 2021-04-17 10:31:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\app\src\views\pages\doctor.vue
-->
<template>
  <div class="doctor">
    <div class="doctor-box">
      <p>医生管理</p>
      <div class="search" v-show="!isThree">
        <input
          type="text"
          placeholder="请输入要搜索的医院"
          v-model="ipt"
          @input="handleSearch"
        />
        <div v-if="ipt !== ''">
          <el-table :data="renderList" border style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="医院名称"
              width="120"
            ></el-table-column>
            <el-table-column prop="number" label="医师人数"> </el-table-column>
            <el-table-column prop="times" label="问诊次数"> </el-table-column>
            <el-table-column prop="title" label="好评度"> </el-table-column>
            <el-table-column prop="handle" label="操作">
              <el-button @click="handle">进入</el-button>
            </el-table-column>
          </el-table>
        </div>

        <div v-else>
          <el-table :data="list" border style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="医院名称"
              width="120"
            ></el-table-column>
            <el-table-column prop="number" label="医师人数"> </el-table-column>
            <el-table-column prop="times" label="问诊次数"> </el-table-column>
            <el-table-column prop="title" label="好评度"> </el-table-column>
            <el-table-column prop="handle" label="操作">
              <el-button @click="handle">进入</el-button>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--  -->
    <router-view v-show="isThree"></router-view>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      isThree: false,
      ipt: "",
      renderList: [], //搜索数据 ,
      list:[]
    };
  },
  created(){
    axios({
      url:"/api/list"
    }).then(res=>{
      console.log(res)
      this.list = res.data.list;
      console.log(this.list)
    })
  },
  watch: {
    $route: function () {
      console.log(this.$route);
      if (this.$route.path === "/home/office") {
        this.isThree = true;
      } else {
        this.isThree = false;
      }
    },
  },
  methods: {
    handle() {
      this.$router.push("/home/office");
    },
    handleSearch() {
      this.renderList = this.list.filter((item) => {
        // console.log(item.id)
        return  item.name.includes(this.ipt);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.doctor {
  p {
    width: 100%;
    height: 30px;
    border-bottom: 3px solid rgb(88, 88, 172);
    margin-bottom: 10px;
  }
  .search {
    width: 100%;
    height: 30px;
  }
}
</style>